Skip to content

Button, Project Solar - focus style updates (HDS-5666) #3388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 5 commits into
base: project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations
Choose a base branch
from
Draft

Button, Project Solar - focus style updates (HDS-5666) #3388

wants to merge 5 commits into from

Conversation

@KristinLBradley
Copy link
Contributor

@KristinLBradley KristinLBradley commented Nov 25, 2025 •
edited
Loading

WIP: Testing modifications to Button focus styles to standardize and to optimize for easier "Carbonization"

Previews:

📌 Summary

If merged, this PR modifies the focus styles of Buttons...

🛠️ Detailed description

  1. From the ticket: "the focus of the Primary HDS button has a slightly different implementation than the other HDS buttons (different offset of the ring)"
  • Testing modification of Primary Button focus styles to follow implementation of other Button variants. (Safe focus ring offset, etc.)
  • UPDATE: Visual style differences to standardize Primary Button are on hold until there's time for closer review.
  1. From the ticket: "the focus for the Carbon buttons is applied as two inset/inner shadows, with two different colors. - This is a completely different approach than ours"
  • Testing modification of Button styles to use box-shadow & border-color instead of pseudo-element, more similar to Carbon's implementation.
  • Now testing outline vs. box-shadow

📸 Screenshots

PROPOSED STANDARDIZATION OF “PRIMARY” FOCUS STYLE

CURRENT FOCUS STYLE
image

STANDARDIZED FOCUS STYLE
Modified to follow styling of other Button variant focus styles
image

🔗 External links

👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

@vercel
Copy link

vercel bot commented Nov 25, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
hds-showcase Ready Ready Preview Dec 2, 2025 9:36pm
hds-website Ready Ready Preview Dec 2, 2025 9:36pm

@KristinLBradley KristinLBradley changed the title Project Dryrun, Button focus style updates (HDS-5666) Button, Project Solar Dryrun - focus style updates (HDS-5666) Nov 25, 2025
@KristinLBradley KristinLBradley changed the base branch from main to project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations November 25, 2025 17:28
@didoo didoo force-pushed the kristin/hds-5666-dryrun-button-focus-style-updates branch from 50bed6b to 0db2121 Compare November 25, 2025 18:05
@KristinLBradley KristinLBradley requested review from a team and LilithJames-HDS and removed request for LilithJames-HDS November 25, 2025 18:22
@KristinLBradley KristinLBradley changed the title Button, Project Solar Dryrun - focus style updates (HDS-5666) Button, Project Solar - focus style updates (HDS-5666) Nov 25, 2025
@KristinLBradley

This comment was marked as resolved.

Sign in to view
@didoo didoo force-pushed the project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations branch 7 times, most recently from 6e213a8 to b69f52a Compare December 1, 2025 14:38
@KristinLBradley
Copy link
Contributor Author

KristinLBradley commented Dec 2, 2025

Added back test of focus styles using outline vs. box-shadow styles.

@didoo didoo force-pushed the project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations branch from b69f52a to 62f73a0 Compare December 2, 2025 10:06
@didoo didoo force-pushed the kristin/hds-5666-dryrun-button-focus-style-updates branch from 072db8e to 8706f95 Compare December 2, 2025 16:29
@didoo didoo force-pushed the project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations branch from 62f73a0 to 6e3d58b Compare December 2, 2025 19:40
@didoo didoo force-pushed the kristin/hds-5666-dryrun-button-focus-style-updates branch from 8706f95 to 7b70bad Compare December 2, 2025 19:41
KristinLBradley
KristinLBradley commented Dec 2, 2025
View reviewed changes
packages/components/src/styles/components/advanced-table.scss
box-shadow: var(--token-elevation-low-box-shadow);
}

// Use pseudo element for focus ring to allow offset position to be partially inside the button
Copy link
Contributor Author

@KristinLBradley KristinLBradley Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use of pseudo-elements for focus on AdvancedTable child components can be re-examined at a later time, as it seems to necessitate visual design changes.

@KristinLBradley
Copy link
Contributor Author

KristinLBradley commented Dec 3, 2025

Need to fix the visual style/color of the CodeBlock CopyButton focus ring next

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

packages/components showcase

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@KristinLBradley @hashibot-hds